<template>
  <div class="bottomnav">
    <ul class="nav">
      <li>
        <div><img src="../../assets//icon//zjt.png" alt="" /></div>
      </li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>
        <div><img src="../../assets/icon/yjt.png" alt="" /></div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style>
.bottomnav {
  width: 1200px;
  height: 40px;
  /* background: red; */
  margin: 360px auto;
}
.bottomnav .nav {
  width: 366px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.bottomnav .nav li {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #f8f8f8;
  opacity: 0.6;
  border-radius: 50%;
  text-align: center;
}

.bottomnav .nav li:hover {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #ce594d;
  opacity: 0.6;
  border-radius: 50%;
  text-align: center;
}
</style>